<!DOCTYPE html>
<html>
<head>
    <title>Test Frontend API Connection</title>
</head>
<body>
    <h1>测试前端API连接</h1>
    <button onclick="testDiscoverModels()">测试发现模型API</button>
    <div id="result"></div>

    <script>
        async function testDiscoverModels() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '正在测试...';

            try {
                const response = await fetch('http://localhost:8002/api/v1/models/discover', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer test-token'
                    },
                    body: JSON.stringify({
                        provider: 'deepseek',
                        base_url: 'https://api.deepseek.com/v1',
                        api_key: 'sk-ddc734bd134d4ac49bd943b7834d46e2'
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                resultDiv.innerHTML = `
                    <h2>测试结果:</h2>
                    <pre>${JSON.stringify(result, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <h2>错误:</h2>
                    <p style="color: red;">${error.message}</p>
                `;
                console.error('Test failed:', error);
            }
        }
    </script>
</body>
</html>